<script setup lang="ts">
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import {useUserStore} from "/@/store";

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const isCollapse = ref<Boolean>(false)
const user = useUserStore()

</script>

<template>
    <div class="container">
        <el-menu
                default-active="1"
                :router="true"
                :collapse="isCollapse"
                class="el-menu-vertical-demo">

            <el-menu-item  class="info">
                <div class="profile">
                    <!--                    <div class="profile-image"></div>-->
                    <el-image  :src="user.avatar" class="profile-image"/>
                    <div class="right">
                        <div class="name-container">
                            <span class="username">{{ user.username }}</span>
                            <span class="verification-badge">✓</span>
                        </div>
                        <div class="mute-button">
                            <span>{{ user.signature }}</span>
                        </div>
                    </div>
                </div>
            </el-menu-item>
            <el-menu-item index="1" v-if="user.admin==='admin'" route="/home/user/admin">
                <el-icon>
                    <document/>
                </el-icon>
                <span>
               用户管理
            </span>
            </el-menu-item>
        </el-menu>

    </div>
</template>

<style scoped lang="scss">


.container {

  .info {
    height: 150px;

    .profile {
      height: 150px;
      display: flex;
      align-items: center;
      padding: 30px 0 30px 0;
      border-bottom: 1px solid #e2e2e2;
      //margin-bottom: 10px;

      .profile-image {
        width: 40px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(to right, #7F7FD5, #86A8E7, #91EAE4);
        //margin-right: 10px;
      }

      .right {
        width: 100px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center; /* 垂直居中 */
        //align-items: center; /* 水平居中，如果需要的话 */

        .name-container {
          height: 30px;
          display: flex; /* 启用 Flex 布局 */
          justify-content: space-around; /* 在项之间平均分布空间 */
          /* 或使用 justify-content: space-between; 项之间的间隔相等，第一 */
          span {
            height: 30px;
            line-height: 30px;
          }

          .username {
            font-size: 1.2em;
            font-weight: bold;
          }

          .verification-badge {
            color: #4F8BF9;
            margin-left: 5px;
          }
        }
      ;

        .mute-button {
          height: 30px;
          background: none;
          border: none;
          color: #4F8BF9;
          cursor: pointer;
          font-size: 1em;
          margin-left: 5px;

          span {
            display: block;
            height: 30px;
            line-height: 30px;
          }
        }
      }
    }
  }

  overflow: hidden;
  width: 100%;
}

.el-menu-vertical-demo {
  height: 100%;
  min-height: calc(100vh - 120px);
  display: flex;
  width: 100%;
  flex-direction: column;
}

.bar-ul li {
  width: 100%;
  height: 100px;
  background-color: #FF9900;
}
</style>
